import { getDeInfoByPage, addDeInfo, updateDeInfo, delDeInfo, exportDeInfo } from '@/services/device/deInfo';
import { PlusOutlined } from '@ant-design/icons';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import type { ActionType, ProColumns } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import { Button, Form, Input, message, Modal, Tree } from 'antd';
import { sortTran, filterTran } from '@/utils/requestUtil';
import React, { useEffect, useRef, useState } from 'react';
import { ModalForm, ProFormText } from '@ant-design/pro-components';
const DeInfo: React.FC<{}> = () => {
const actionRef = useRef<ActionType>();
  const [modalVisit, setModalVisit] = useState(false); // 新建和编辑提示框
  const [confirmLoading, setConfirmLoading] = useState(false); //编辑框的disable
  const [formTitle, setFormTitle] = useState('新建'); //
  const [createOrUpdate, setCreateOrUpdate] = useState(false); //编辑框的disable
  const [form] = Form.useForm();
    const ref = useRef(null);
  const columns: ProColumns[] = [
        {
        title: '序号',
        dataIndex: 'index',
        valueType: 'index',
        width: 80,
        },
        {
          title: '设备类别',
          dataIndex: 'category',
        },
        {
          title: '联系人',
          dataIndex: 'contact',
        },
        {
          title: '采购日期',
          dataIndex: 'contractDate',
        },
        {
          title: '采购编号',
          dataIndex: 'contractId',
        },
        {
          title: '固资编号',
          dataIndex: 'deviceId',
        },
        {
          title: '设备名称',
          dataIndex: 'deviceName',
        },
        {
          title: '设备状态',
          dataIndex: 'deviceState',
        },
        {
          title: '规格型号',
          dataIndex: 'deviceType',
        },
        {
          title: '唯一标识',
          dataIndex: 'identification',
        },
        {
          title: '安装位置',
          dataIndex: 'location',
        },
        {
          title: '品牌',
          dataIndex: 'manufacturer',
        },
        {
          title: '报废日期',
          dataIndex: 'scrappedDate',
        },
        {
          title: '保养周期',
          dataIndex: 'serviceCycle',
        },
        {
          title: '1月保养结果',
          dataIndex: 'serviceResult1',
        },
        {
          title: '10月保养结果',
          dataIndex: 'serviceResult10',
        },
        {
          title: '11月保养结果',
          dataIndex: 'serviceResult11',
        },
        {
          title: '12月保养结果',
          dataIndex: 'serviceResult12',
        },
        {
          title: '2月保养结果',
          dataIndex: 'serviceResult2',
        },
        {
          title: '3月保养结果',
          dataIndex: 'serviceResult3',
        },
        {
          title: '4月保养结果',
          dataIndex: 'serviceResult4',
        },
        {
          title: '5月保养结果',
          dataIndex: 'serviceResult5',
        },
        {
          title: '6月保养结果',
          dataIndex: 'serviceResult6',
        },
        {
          title: '7月保养结果',
          dataIndex: 'serviceResult7',
        },
        {
          title: '8月保养结果',
          dataIndex: 'serviceResult8',
        },
        {
          title: '9月保养结果',
          dataIndex: 'serviceResult9',
        },
        {
          title: '联系方式',
          dataIndex: 'telephone',
        },
        {
          title: '供应商',
          dataIndex: 'vendor',
        },
        {
        title: '创建日期', //表头显示的名称
        search: false,
        dataIndex: 'createTime',
        },
        {
        title: '创建人', //表头显示的名称
        search: false,
        dataIndex: 'createName',
        },
        {
        title: '操作',
        valueType: 'option',
        key: 'option',
        fixed: 'right',
        render: (text, record, _, action) => [
        <a
                key="editKey"
                onClick={() => {

        setModalVisit(true);
        setCreateOrUpdate(true);
        setFormTitle('编辑');
        form.setFieldsValue({
        category: record.category,
        contact: record.contact,
        contractDate: record.contractDate,
        contractId: record.contractId,
        deviceId: record.deviceId,
        deviceName: record.deviceName,
        deviceState: record.deviceState,
        deviceType: record.deviceType,
        identification: record.identification,
        location: record.location,
        manufacturer: record.manufacturer,
        scrappedDate: record.scrappedDate,
        serviceCycle: record.serviceCycle,
        serviceResult1: record.serviceResult1,
        serviceResult10: record.serviceResult10,
        serviceResult11: record.serviceResult11,
        serviceResult12: record.serviceResult12,
        serviceResult2: record.serviceResult2,
        serviceResult3: record.serviceResult3,
        serviceResult4: record.serviceResult4,
        serviceResult5: record.serviceResult5,
        serviceResult6: record.serviceResult6,
        serviceResult7: record.serviceResult7,
        serviceResult8: record.serviceResult8,
        serviceResult9: record.serviceResult9,
        telephone: record.telephone,
        vendor: record.vendor,
        id: record.id,
        });
        }}
        >
        编辑
        </a>,
        <a
                key="deleteKey"
                onClick={() => {


        Modal.confirm({
        title: '删除',
        content: '确定要删除吗',
        okText: '确认',
        cancelText: '取消',
        onOk: async () => {
        await delDeInfo({ id: record.id });
        actionRef.current.reload();
        },
        });

        }}
        >
        删除
        </a>,
        ],
        },
  ];
  const handleSubmit = async (values) => {
        setConfirmLoading(true);
        if (formTitle == '新建') {
          const result = await addDeInfo(values);
        if (result != null) {
          message.success('添加成功');
        }
        } else {
          await updateDeInfo(values);
        }
        setConfirmLoading(false);
        setModalVisit(false);
        actionRef.current.reload();
  };

  return (
  <PageHeaderWrapper title={false} breadcrumb={undefined}>
    <ProTable
        headerTitle="xx查询"
        actionRef={actionRef} //用于触发刷新操作等，看api
        rowKey="id" //表格行 key 的取值，可以是字符串或一个函数
        formRef={ref}
        toolBarRender={(action, { selectedRows }) => [
              <Button
                key="button"
                icon={<PlusOutlined />}
                onClick={() => {
                    setCreateOrUpdate(false);
                    setFormTitle('新建');
                    form.resetFields();
                    setModalVisit(true);
                }}
                type="primary"
                >
                新建
                </Button>,
                <Button
                        key="button"
                        icon={<PlusOutlined />}
                onClick={() => {
                const filters = filterTran(ref.current.getFieldsValue());
                exportDeInfo({
                    current: 1,
                    pageSize: 5000,
                    filters: filters,
                }).then((res) => {
                const aLink = document.createElement('a');
                document.body.appendChild(aLink);
                aLink.style.display = 'none';
                aLink.href = window.URL.createObjectURL(res);
                aLink.setAttribute('download', `DeInfo.xlsx`);
                aLink.click();
                document.body.removeChild(aLink);
                });
                }}
                type="primary"
                >
                导出
                </Button>,
        ]}
        request={async (params = {}, sort, filter) => {

                const sorters = sortTran(sort);
                const filters = filterTran(params);
                const result = await getDeInfoByPage({ ...params, sorters: sorters, filters: filters });
                return {
                data: result.data.content,
                total: result.data.totalElements,
                success: result.success,
                };

        }}
        columns={columns}
        scroll={{ x: 2000, y: 350 }}
        rowSelection={{}}
    />

    <ModalForm
        visible={modalVisit}
        title={formTitle}
        form={form}
        onFinish={handleSubmit}
        modalProps={{
        destroyOnClose: true,
        onCancel: () => {
            setModalVisit(false);
        },
        }}
    >
        <ProFormText  name="id" label="id" placeholder="请输入名称" hidden={true} />
        <ProFormText  name="category" label="设备类别"
                 rules={[{ required: true, message: 'Please input your category!' }]}
        disabled={createOrUpdate}  />
        <ProFormText  name="contact" label="联系人"
                 rules={[{ required: true, message: 'Please input your contact!' }]}
        disabled={createOrUpdate}  />
        <ProFormText  name="contractDate" label="采购日期"
                 rules={[{ required: true, message: 'Please input your contractDate!' }]}
        disabled={createOrUpdate}  />
        <ProFormText  name="contractId" label="采购编号"
                 rules={[{ required: true, message: 'Please input your contractId!' }]}
        disabled={createOrUpdate}  />
        <ProFormText  name="deviceId" label="固资编号"
                 rules={[{ required: true, message: 'Please input your deviceId!' }]}
        disabled={createOrUpdate}  />
        <ProFormText  name="deviceName" label="设备名称"
                 rules={[{ required: true, message: 'Please input your deviceName!' }]}
        disabled={createOrUpdate}  />
        <ProFormText  name="deviceState" label="设备状态"
                 rules={[{ required: true, message: 'Please input your deviceState!' }]}
        disabled={createOrUpdate}  />
        <ProFormText  name="deviceType" label="规格型号"
                 rules={[{ required: true, message: 'Please input your deviceType!' }]}
        disabled={createOrUpdate}  />
        <ProFormText  name="identification" label="唯一标识"
                 rules={[{ required: true, message: 'Please input your identification!' }]}
        disabled={createOrUpdate}  />
        <ProFormText  name="location" label="安装位置"
                 rules={[{ required: true, message: 'Please input your location!' }]}
        disabled={createOrUpdate}  />
        <ProFormText  name="manufacturer" label="品牌"
                 rules={[{ required: true, message: 'Please input your manufacturer!' }]}
        disabled={createOrUpdate}  />
        <ProFormText  name="scrappedDate" label="报废日期"
                 rules={[{ required: true, message: 'Please input your scrappedDate!' }]}
        disabled={createOrUpdate}  />
        <ProFormText  name="serviceCycle" label="保养周期"
                 rules={[{ required: true, message: 'Please input your serviceCycle!' }]}
        disabled={createOrUpdate}  />
        <ProFormText  name="serviceResult1" label="1月保养结果"
                 rules={[{ required: true, message: 'Please input your serviceResult1!' }]}
        disabled={createOrUpdate}  />
        <ProFormText  name="serviceResult10" label="10月保养结果"
                 rules={[{ required: true, message: 'Please input your serviceResult10!' }]}
        disabled={createOrUpdate}  />
        <ProFormText  name="serviceResult11" label="11月保养结果"
                 rules={[{ required: true, message: 'Please input your serviceResult11!' }]}
        disabled={createOrUpdate}  />
        <ProFormText  name="serviceResult12" label="12月保养结果"
                 rules={[{ required: true, message: 'Please input your serviceResult12!' }]}
        disabled={createOrUpdate}  />
        <ProFormText  name="serviceResult2" label="2月保养结果"
                 rules={[{ required: true, message: 'Please input your serviceResult2!' }]}
        disabled={createOrUpdate}  />
        <ProFormText  name="serviceResult3" label="3月保养结果"
                 rules={[{ required: true, message: 'Please input your serviceResult3!' }]}
        disabled={createOrUpdate}  />
        <ProFormText  name="serviceResult4" label="4月保养结果"
                 rules={[{ required: true, message: 'Please input your serviceResult4!' }]}
        disabled={createOrUpdate}  />
        <ProFormText  name="serviceResult5" label="5月保养结果"
                 rules={[{ required: true, message: 'Please input your serviceResult5!' }]}
        disabled={createOrUpdate}  />
        <ProFormText  name="serviceResult6" label="6月保养结果"
                 rules={[{ required: true, message: 'Please input your serviceResult6!' }]}
        disabled={createOrUpdate}  />
        <ProFormText  name="serviceResult7" label="7月保养结果"
                 rules={[{ required: true, message: 'Please input your serviceResult7!' }]}
        disabled={createOrUpdate}  />
        <ProFormText  name="serviceResult8" label="8月保养结果"
                 rules={[{ required: true, message: 'Please input your serviceResult8!' }]}
        disabled={createOrUpdate}  />
        <ProFormText  name="serviceResult9" label="9月保养结果"
                 rules={[{ required: true, message: 'Please input your serviceResult9!' }]}
        disabled={createOrUpdate}  />
        <ProFormText  name="telephone" label="联系方式"
                 rules={[{ required: true, message: 'Please input your telephone!' }]}
        disabled={createOrUpdate}  />
        <ProFormText  name="vendor" label="供应商"
                 rules={[{ required: true, message: 'Please input your vendor!' }]}
        disabled={createOrUpdate}  />
    </ModalForm>
  </PageHeaderWrapper>
  );
  };
  export default DeInfo;
